<template>
  <v-card @click="toggleSelection" class="mb-4 px-2" outlined flat tile>
    <v-row style="width: 100%" class="d-flex align-center">
      <v-col cols="1">
        <v-radio-group v-model="onSelected" row dense>
          <v-radio
            @click.stop="toggleSelection"
            size="10"
            class="ma-0"
            :value="1"
          ></v-radio>
        </v-radio-group>
      </v-col>
      <v-col cols="3">
        <v-img
          :src="itemInfo.productPic"
          height="55"
          aspect-ratio="1"
          class="grey lighten-2"
        ></v-img>
      </v-col>
      <v-col class="d-flex flex-column" cols="5">
        <span class="subtitle-2 text-no-wrap text-truncate">{{
          itemInfo.productName
        }}</span>
        <span class="caption text--secondary">{{
          JSON.parse(itemInfo.productAttr)
            .map(each => each.value)
            .join('/')
        }}</span>
        <span class="caption red--text">{{ '￥' + itemInfo.price }}</span>
      </v-col>
      <v-col class="d-flex align-center" cols="3">
        <span @click.stop="minusCartItemCount" class="btn-control-item-count">
          <v-icon size="15">mdi-minus</v-icon>
        </span>
        <span class="item-count">{{ itemInfo.quantity }}</span>
        <span @click.stop="plusCartItemCount" class="btn-control-item-count">
          <v-icon size="15">mdi-plus</v-icon>
        </span>
      </v-col>
    </v-row>
  </v-card>
</template>

<script lang="ts">
import Vue from 'vue';
import request from '@/request';

export default Vue.extend({
  name: 'shopping-cart-item',
  props: ['itemInfo'],
  data() {
    return {
      onSelected: 0
    };
  },
  methods: {
    toggleSelection() {
      this.onSelected = 1 - this.onSelected;
    },
    minusCartItemCount() {
      if (this.itemInfo.quantity === 1) {
        this.removeCartItem();
      } else {
        this.changeCartItemCount(-1);
      }
    },
    plusCartItemCount() {
      this.changeCartItemCount(1);
    },
    changeCartItemCount(count: number) {
      this.$emit('onCartItemCountChange', true);
      if (this.onSelected === 1) {
        this.$bus.emit(
          'onCartItemSelected',
          (this.itemInfo.price / this.itemInfo.quantity) * count
        );
      }
      const unitPrice = this.itemInfo.price / this.itemInfo.quantity;
      request
        .put(`/cartItems/${this.itemInfo.id}`, {
          quantity: this.itemInfo.quantity + count,
          price: this.itemInfo.price + unitPrice * count
        })
        .then(() => {
          this.$store.dispatch('refreshShoppingCartItems', () => {
            this.$emit('onCartItemCountChange', false);
          });
        });
    },
    removeCartItem() {
      this.$emit('onCartItemCountChange', true);
      if (this.onSelected === 1) {
        this.$bus.emit('onCartItemSelected', -this.itemInfo.price);
      }
      request.delete(`/cartItems/${this.itemInfo.id}`).then(() => {
        this.$store.dispatch('refreshShoppingCartItems', () => {
          this.$emit('onCartItemCountChange', false);
        });
      });
    }
  },
  watch: {
    onSelected(newValue) {
      this.$bus.emit(
        'onCartItemSelected',
        newValue === 1 ? this.itemInfo.price : -this.itemInfo.price
      );
    }
  },
  mounted() {
    this.$bus.on('onShoppingCartSelectAll', selectAllStatus => {
      this.onSelected = selectAllStatus;
    });
  },
  destroyed() {
    this.$bus.off('onShoppingCartSelectAll');
  }
});
</script>

<style lang="less" scoped>
.btn-control-item-count {
  height: 18px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  border: 1px solid #666666;
}
.item-count {
  height: 18px;
  width: 30px;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #666666;
}
</style>
